<template>
  <div class="app-container">
    <TheQueryForm :option="searchOption" @onSubmit="onSubmit" @onClear="onClear"></TheQueryForm>
    <el-row style="margin-bottom:20px;">
      <el-button v-loading="exportLoading" @click="handleExport">导出Excel</el-button>
    </el-row>
    <TheTable
      :tableOption="tableOption"
      :pageNo.sync="pageNo"
      :limit.sync="limit"
      :api="queryPageApi"
      :queryParams="queryParams"
    />
  </div>
</template>
<script>
import TheQueryForm from "@/components/TheQueryForm/index.vue";
import TheTable from "@/components/TheTable/Index.vue";
import { apiContractInfoPage } from "@/api/receipt/index.js";
export default {
  components: { TheQueryForm, TheTable },
  data() {
    const _this = this;
    return {
      queryPageApi: apiContractInfoPage,
      queryParams: {},
      pageNo: 1,
      limit: 10,
      exportLoading: false,
      searchOption: [
        {
          field: "memberPhone",
          label: "用户手机号",
          placeholder: "用户手机号",
          required: false,
          rules: [],
          type: "Input",
          defaultValue: ""
        },
        {
          field: "memberId",
          label: "用户ID",
          placeholder: "用户ID",
          required: false,
          rules: [],
          type: "Input",
          defaultValue: ""
        },
        {
          field: "contractId",
          label: "借条ID",
          placeholder: "借条ID",
          required: false,
          rules: [],
          type: "Input",
          defaultValue: ""
        },
        {
          type: "Select",
          field: "contractState",
          label: "借条状态",
          placeholder: "借条状态",
          required: false,
          rules: [],
          options: [
            { label: "填写中", value: "FILLING" },
            { label: "签署中", value: "SIGNING" },
            { label: "已生效", value: "EFFECT" },
            { label: "已撤回", value: "WITHDRAWN" },
            { label: "已拒签", value: "REFUSED" },
            { label: "已失效", value: "EXPIRED" }
          ],
          defaultValue: ""
        },
        {
          type: "DatePickerRange",
          field: "time",
          label: "创建时间",
          placeholder: "创建时间",
          required: false,
          rules: []
        }
      ],
      tableOption: [
        {
          label: "借条ID",
          prop: "contractId",
          width: 150
        },
        {
          label: "用户ID",
          prop: "createUser",
          width: 150,
          formatter({ promoterType, creditorMember, debtorMember }) {
            return promoterType == "CREDITOR_MEMBER"
              ? creditorMember
              : debtorMember;
          }
        },
        {
          label: "渠道",
          prop: "evd",
          width: 70,
          formatter({ status }) {
            return "支付宝";
          }
        },
        {
          label: "用户信息",
          prop: "userInfo",
          width: 340,
          render(createElement, { row }) {
            const dom = (
              <div class="row">
                <div>
                  昵称:
                  {row.promoterType == "CREDITOR_MEMBER"
                    ? row.creditorMemberNickName
                    : row.debtorMemberNickName}

                </div>
                <div>
                  手机号:
                  {row.promoterType == "CREDITOR_MEMBER"
                    ? row.creditorMemberPhone
                    : row.debtorMemberPhone}
                </div>
                <div>
                  支付宝id:
                  {row.promoterType == "CREDITOR_MEMBER"
                    ? row.creditorMemberAlipayOpenId
                    : row.debtorMemberAlipayOpenId}
                </div>
              </div>
            );
            return dom;
          }
        },
        {
          label: "出借信息",
          prop: "creditorInfo",
          render(createElement, { row }) {
            const dom = (
              <div class="row">
                <div>金额:{Number(row.loanAmount).tranFormat(2, -2, true)}</div>
                <div>利率:{row.interestAnnualizedPercentage}%</div>
              </div>
            );
            return dom;
          }
        },
        {
          label: "借条状态",
          prop: "contractState",
          width: 80,
          render(h, { row }) {
            const { contractState } = row;
            // 合同状态 0填写中 1签署中 2 已生效 3 已撤回 4 已拒签 5 已失效
            if (contractState == "FILLING") {
              return <el-link type="warning">填写中</el-link>;
            } else if (contractState == "SIGNING") {
              return <el-link type="primary">签署中</el-link>;
            } else if (contractState == "EFFECT") {
              return <el-link type="success">已生效</el-link>;
            } else if (contractState == "WITHDRAWN") {
              return <el-link type="info">已撤回</el-link>;
            } else if (contractState == "REFUSED") {
              return <el-link type="info">已拒签</el-link>;
            } else if (contractState == "EXPIRED") {
              return <el-link type="info">已失效</el-link>;
            }
          }
        },
        {
          label: "创建时间",
          width: 80,
          prop: "createTime",
          render(createElement, { row }) {
            try {
              const strArr = row.createTime.split(" ");
              const dom = (
                <div class="row">
                  <div>{strArr[0]}</div>
                  <div>{strArr[1]}</div>
                </div>
              );
              return dom;
            } catch (error) {
              return <div></div>;
            }
          }
        },
        {
          label: "支付时间",
          width: 80,
          prop: "contractPayTime",
          render(createElement, { row }) {
            try {
              const strArr = row.contractPayTime.split(" ");
              const dom = (
                <div class="row">
                  <div>{strArr[0]}</div>
                  <div>{strArr[1]}</div>
                </div>
              );
              return dom;
            } catch (error) {
              return <div></div>;
            }
          }
        },
        {
          label: "操作",
          width: 80,
          prop: "",
          fixed: "right",
          render(h, { row }) {
            return h("el-row", [
              h("el-link", {
                domProps: {
                  innerHTML: "查看"
                },
                props: {
                  type: "primary"
                },
                on: {
                  click() {
                    _this.onView(row);
                  }
                }
              })
            ]);
          }
        }
      ]
    };
  },
  mounted() {},
  methods: {
    onView(row) {
      this.$router.push({
        path: "/receipt/detail",
        query: { contractId: row.contractId }
      });
    },
    // 导出
    async handleExport() {
      this.exportLoading = true;
      const res = await apiContractInfoPage({
        pageNo: 1,
        pageSize: -1,
        ...this.queryParams
      });
      if (res.code === 200) {
        let header = [
          {
            title: "借条ID",
            prop: "contractId",
            valueType: "s"
          },
          {
            title: "借条状态",
            prop: "contractState",
            valueType: "s"
          },
          {
            title: "出借人or借款人发起",
            prop: "promoterType",
            valueType: "s"
          },
          {
            title: "出借人姓名",
            prop: "creditorMemberName",
            valueType: "s"
          },
          {
            title: "出借人手机号",
            prop: "creditorMemberPhone",
            valueType: "s"
          },
          {
            title: "出借人身份证号",
            prop: "creditorMemberIdNumber",
            valueType: "s"
          },
          { title: "借款人姓名", prop: "debtorMemberName", valueType: "s" },
          {
            title: "借款人手机号",
            prop: "debtorMemberPhone",
            valueType: "s"
          },
          {
            title: "借款人身份证号",
            prop: "debtorMemberIdNumber",
            valueType: "s"
          },

          {
            title: "借款金额",
            prop: "loanAmount",
            valueType: "n",
            numFmt: $numFmt.money
          },
          {
            title: "借款期间",
            prop: "timeRange", //debtorTime  repaymentTime
            valueType: "s"
          },
          {
            title: "借款事由",
            prop: "borrowingReason"
          },
          {
            title: "利息",
            prop: "contractInterest",
            valueType: "n",
            numFmt: $numFmt.money
          },
          {
            title: "年利率",
            prop: "interestAnnualizedPercentage",
            valueType: "n",
            numFmt: $numFmt.ratio
          },
          {
            title: "逾期利率",
            prop: "timeInterest",
            valueType: "n",
            numFmt: $numFmt.ratio
          },
          {
            title: "备注说明",
            prop: "contractRemarks",
            valueType: "s",
            width: 100
          },
          {
            title: "支付方式",
            prop: "paymentType",
            valueType: "s"
          },
          {
            title: "支付宝转账需要支付宝流水号",
            prop: "tradeNo",
            valueType: "s"
          },
          { title: "管辖法院", prop: "courtAddress", valueType: "s" },

          {
            title: "借款人地址",
            prop: "debtorMemberAddress",
            valueType: "s"
          },
          {
            title: "创建人签鸽用户id",
            prop: "createMemberId",
            valueType: "s"
          },

          { title: "创建人支付宝id", prop: "alipayOpenId", valueType: "s" },
          { title: "创建人昵称", prop: "alipayNickName", valueType: "s" },
          { title: "创建人手机号", prop: "createPhone", valueType: "s" },
          { title: "合同支付时间", prop: "contractPayTime", valueType: "s" },
          { title: "填写中时间", prop: "createTime", valueType: "s" },
          { title: "签署中时间", prop: "fillTime", valueType: "s" },
          { title: "已生效时间", prop: "effectiveTime", valueType: "s" },
          { title: "已撤回时间", prop: "withdrawalTime", valueType: "s" },
          { title: "已拒签时间", prop: "refusalTime", valueType: "s" },
          { title: "已失效时间", prop: "expirationTime", valueType: "s" }
        ];

        let dataSource = res.data.records.map(item => {
          return {
            ...item,
            promoterId:
              item.promoterType == "CREDITOR_MEMBER"
                ? item.creditorMember
                : item.debtorMember,
            loanAmount: item.loanAmount / 100,
            paymentType:
              item.transferStatus === "YES"
                ? "借款已支付"
                : item.paymentType === "ALIPAY"
                ? "支付宝转账"
                : "其他",
            contractInterest: item.contractInterest / 100,
            timeInterest: item.timeInterest / 100,
            interestAnnualizedPercentage:
              item.interestAnnualizedPercentage / 100,
            promoterType:
              item.promoterType == "CREDITOR_MEMBER" ? "出借人" : "借款人",
            contractState: this.getStateTxt(item.contractState),
            timeRange: item.debtorTime + "至" + item.repaymentTime,
            courtAddress: item.courtAddress?item.courtAddress + "法院":'/',
            alipayOpenId:
              item.promoterType == "CREDITOR_MEMBER"
                ? item.creditorMemberAlipayOpenId
                : item.debtorMemberAlipayOpenId,
            createPhone:
              item.promoterType == "CREDITOR_MEMBER"
                ? item.creditorMemberPhone
                : item.debtorMemberPhone,
            createMemberId:
              item.promoterType == "CREDITOR_MEMBER"
                ? item.creditorMember
                : item.debtorMember,
            alipayNickName:
              item.promoterType == "CREDITOR_MEMBER"
                ? item.creditorMemberNickName
                : item.debtorMemberNickName
          };
        });
        const option = {
          dataSource: dataSource,
          header: header,
          fileName: "借条管理"
        };
        window.$Json2Excel(option);
        this.exportLoading = false;
      } else {
        this.$message.warring("导出操作失败,请重试");
        this.exportLoading = false;
      }
    },
    getStateTxt(str) {
      let txt = "";
      switch (str) {
        case "FILLING":
          txt = "填写中";
          break;
        case "SIGNING":
          txt = "签署中";

          break;
        case "EFFECT":
          txt = "已生效";

          break;
        case "WITHDRAWN":
          txt = "已撤回";

          break;
        case "REFUSED":
          txt = "已拒签";

          break;
        case "EXPIRED":
          txt = "已失效";

          break;
        default:
          break;
      }
      return txt;
    },
    onSubmit({ values }) {
      console.log(values);
      if (values.hasOwnProperty("time")) {
        values = {
          ...values,
          startTime: values.time ? values.time[0] : "",
          endTime: values.time ? values.time[1] : ""
        };
        delete values.time;
      }
      this.queryParams = values;
    },
    onClear() {
      this.queryParams = {};
    }
  }
};
</script>
<style scoped lang='scss'>
::v-deep .row {
  div {
    width: 100%;
    text-align: left;
  }
}
</style>
